<template>
    <!-- <div class="chatbox" v-for="item in option" :key="item.title.text" style="width:3.75rem;height:1.875rem">
        <BarChat style="width:100%;height:100%;" :option="item" :id="item.title.text"/>
    </div> -->
    <BarChat  v-for="item in option" :key="item.title.text" :style="'width:3.75rem;height:2.3438rem; background-color: '+item.color" :option="item" :id="item.title.text"/>
</template>

<script setup>
    import BarChat from "../components/BarChat.vue"
    import { ref } from "vue";
    
    const option = ref([{
            title: { text: "折线图" },
            tooltip: {},
            xAxis: {
            data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
            },
            yAxis: {},
            series: [
            {
                name: "用户量",
                type: "line",
                data: [5, 20, 36, 10, 10, 20],
            },
            ],
        },
        {
            title: { text: "柱状图" },
            tooltip: {},
            xAxis: {
            data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
            },
            yAxis: {},
            series: [
            {
                name: "用户量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
            },
            ],
        }
    ])
    
    const option2 = ref()
</script>